<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1. 定义一个根标签,未来用来插入动态创建的dom对象 -->
    <div id="root"></div>
    <!-- 2. 引入react和react-dom
        注意: 要先引入react,后引入react-dom.因为react-dom依赖react
        react.js是核心包.我们要学习的react知识,90%以上来自于这个包
        react-dom.js是react提供的专门用来操作dom对象提供的包
    -->
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>

    <!-- 3. 根据数据,动态的创建虚拟dom -->
    <script>
      let obj = { name: 'lt', info: 'lsp' }
      //   需求:  根据数据,创建一个html结构:  div#box>h3{name}+p{info}

      // react.development.js提供了React对象
      //   React.createElement 创建了一个普通的对象,只是这个普通对象是用来描述,未来要创建的dom对象的名字,属性,子节点.所以人为的把这个普通对象称之为虚拟dom
      //   document.creatElement 创建dom对象
      //   React.createElement('标签名',{属性: 值,属性:值}, 子节点,子节点,子节点...) 返回这个虚拟dom
      const h3 = React.createElement('h3', {}, obj.name)
      const p = React.createElement('p', {}, obj.info)
      const div = React.createElement('div', { id: 'box' }, h3, p)
      //   console.log(div)
      //   console.log(document.createElement('div'))

      //   4. 让react帮我们将虚拟dom创建成真实dom,并渲染到页面
      // react-dom.development.js 提供了对象ReactDOM
      // ReactDOM.render(虚拟dom, 真实dom树上的某个节点) 作用: 1. 根据虚拟dom创建真正的dom对象. 2.然后将创建好的真正的dom对象添加到真正的dom树上
      const root = document.getElementById('root')
      ReactDOM.render(div, root)
      //   ReactDOM.render(div, document.getElementById('root'))
    </script>
  </body>
</html>
